<template>
  <div class="content-block">
      <div class="content-main">
        <div class="content-title">
          <div class="title-text-dot">日志列表</div>
          <div class="title-handle">
            <div class="handel-item">
              <el-button type="primary" size="mini" @click="handleSearch">查 询</el-button>
            </div>
            <div class="handel-item">
              <el-date-picker
                v-model="optEndDate"
                type="date"
                format="yyyy-MM-dd"
                size="mini"
                value-format="timestamp"
                placeholder="结束时间">
              </el-date-picker>
            </div>
            <div class="handel-item">
              <el-date-picker
                v-model="optStartDate"
                type="date"
                size="mini"
                format="yyyy-MM-dd"
                value-format="timestamp"
                placeholder="开始时间">
              </el-date-picker>
            </div>
            <div class="handel-item">
              <el-select v-model="optType" size="mini" filterable clearable placeholder="操作类型">
                <el-option
                  v-for="item in optTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="handel-item">
              <el-input v-model="optUser" size="mini" type="text" placeholder="操作用户"></el-input>
            </div>
            <div class="handel-item">
              <el-input v-model="optModel" size="mini" type="text" placeholder="操作模块"></el-input>
            </div>
          </div>
        </div>
        <el-table
          :data="logList"
          border
          size="mini"
          v-loading="tableLoading"
          height="calc(100vh - 230px)"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            :index="indexMethod"
            align="center">
          </el-table-column>
          <el-table-column
            label="操作模块"
            prop="optModel">
          </el-table-column>
          <el-table-column
            label="操作用户"
            prop="optUser">
          </el-table-column>
          <el-table-column
            label="操作类型">
            <template slot-scope="scope">
              <span>{{scope.row.optType | optType}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作结果"
            prop="optResult">
            <template slot-scope="scope">
              <span
                :class="scope.row.optResult ==='Y'?'text-green':'text-red'">{{scope.row.optResult ==='Y'?'成功':'失败'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作日期">
            <template slot-scope="scope">
              <span>{{formatTime('yyyy-MM-dd hh:mm:ss',scope.row.optDate)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作内容"
            prop="optContext">
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-size="pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    data() {
      return {
        current: 1,
        pageSize: 10,
        total: 0,
        optEndDate: '',
        optModel: '',
        optStartDate: '',
        optType: '',
        optUser: '',
        tableLoading: false,
        optTypeList: [
          {
            value: 'add',
            label: '添加'
          },
          {
            value: 'modify',
            label: '修改'
          },
          {
            value: 'delete',
            label: '删除'
          },
          {
            value: 'approve',
            label: '审批'
          },
          {
            value: 'operation',
            label: '操作'
          }
        ]
      }
    },
    computed: {
      ...mapState({
        logList: state => state.systemSet.logList
      })
    },
    mounted() {
      this.getData()
    },
    methods: {
      ...mapActions('systemSet', ['getLogList']),
      indexMethod(index) {
        return (this.current - 1) * this.pageSize + 1 + index
      },
      getData() {
        this.tableLoading = true
        this.getLogList(this)
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.current = val
        this.getData()
      },
      handleSearch() {
        this.current = 1
        this.getData()
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
.title-handle{
  .handel-item:not(:first-child){
    width: 140px;
  }
}
</style>
